

<template>
  <div>
    <el-container>
<!--      侧边栏-->
      <el-aside style="width: 200px; min-height: 100vh ;background-color: #001529;">
        <div style="height: 60px; color: white; display: flex; align-items: center; justify-content: center">
          LEVEL-UP
        </div>
<!--        侧边栏菜单-->
<!--        :绑定 $route.path绑定当前浏览器访问的路由-->
<!--        默认(高亮)：default-active="\"-->
<!--        rooter:设置点击-->
        <el-menu rooter background-color="#001529" text-color="rgba(255,255,255,0.65)" >
          <el-menu-item index="/data" @click="$router.push('/')"><el-icon><DataLine /></el-icon>数据统计</el-menu-item>
          <el-sub-menu>
            <template #title><el-icon><Menu /></el-icon><span>信息管理</span></template>
            <el-menu-item index="/user" @click="$router.push('/user')"><el-icon><User /></el-icon>用户管理</el-menu-item>
            <el-menu-item index="/task" @click="$router.push('/task')" ><el-icon><Clock /></el-icon>任务管理</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>


      <el-container>
<!--        头部区域-->
        <el-header>
          <el-icon><Expand /></el-icon>
          <!--面包屑-->
          <el-breadcrumb separator=">">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item :to="{ path: '/user' }">用户管理</el-breadcrumb-item>
          </el-breadcrumb>
          <!--下拉-->
          <div style="flex: 1; width:0; display: flex; justify-content: flex-end;">
            <el-dropdown>
              <el-icon size="25px"><User /></el-icon>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>信息修改</el-dropdown-item>
                  <el-dropdown-item @click="">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <el-main>
          <!--通过router改变主体内容-->
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<style>

  .el-menu-item:hover, .el-sub-menu__title:hover{
    color: #fff;

  }
  .el-menu-item.is-active{
    border-radius: 5px;
    margin: 4px;
    color: white;
    background-color: cornflowerblue;
  }
  .el-header{
    box-shadow: 2px 0 6px rgb(0,21,41,.35);
    display: flex;
    align-items: center;
  }

  .example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
  }
</style>



<script>

import {ArrowRight} from "@element-plus/icons";
import {defineComponent} from "vue";
import {ArrowDown} from "@element-plus/icons-vue";
import '@/assets/css/global.css'
import * as echarts from 'echarts';
import refresh from "@element-plus/icons/lib/Refresh.js";



export default defineComponent({
  components: {ArrowDown},
  computed: {
    refresh() {
      return refresh
    }
  },

  data(){
    return{

    }
  },
  // 页面加载完之后触发
  mounted() {

  }
})
</script>